<script setup name="subabsent">
import { ref, reactive, onMounted, computed, watch } from 'vue';
import absentHttp from '@/api/absentHttp';
import { ElMessage } from 'element-plus';
import timeFormatter from '@/utils/timeFormatter';
import OAMain from '@/components/OAMain.vue';
import OAPagination from '@/components/OAPagination.vue';
import OADialog from '@/components/OADialog.vue';

let dialogFormVisible = ref(false)
let absent_types = ref([])
let absents = ref([])
let pagination = reactive({
    total: 0,
    page: 1,
})
let rules = reactive({
    status: [
        { required: true, message: '请选择处理结果！', trigger: 'change' }
    ],
    response_content: [
        { required: true, message: '请输入理由！', trigger: 'blur' }
    ],
})

let responser = reactive({
    // email:'',
    // realname:''
})

let absentForm = reactive({
    status: 2,
    response_content: ""
})

let absentFormRef = ref()

let handleAbsent_id = null

//监听当前页码，如果pagination.page发生改变，从后端传入对应的页面数据
watch(() => pagination.page, (value) => {
    requestAbsents(value)
})

const requestAbsents = async (page) => {
    try {
        let absents_data = await absentHttp.getSubAbsents(page)
        let total = absents_data.count;
        pagination.total = total
        let results = absents_data.results;
        absents.value = results;
        // console.log(absents)
    } catch (err) {
        ElMessage.error(err)
    }
}

const onShowDialog = (index) => {
    absentForm.status = 2
    absentForm.response_content = ''
    dialogFormVisible.value = true;
    handleAbsent_id = index
}

const onSubmitAbsent = () => {
    absentFormRef.value.validate(async (valid,fields)=>{
        if(valid){
            try{
                console.log(handleAbsent_id)
                const absent = absents.value[handleAbsent_id] 
                const data = await absentHttp.handleSubAbsent(absent.id, absentForm.status, absentForm.response_content)
                console.log(data)
                absents.value.splice(handleAbsent_id, 1, data)
                dialogFormVisible.value = false
                ElMessage.success('下属考勤处理成功')

            }catch(err){
                ElMessage.error(err)
            }
        }
    })
}

onMounted(async () => {
    try {
        //1.获取请假类型
        absent_types.value = await absentHttp.getAbsentTypes()
        //2.获取审批者
        let responser_data = await absentHttp.getResponser()
        Object.assign(responser, responser_data)
        // responser = responser_data
        console.log(responser)
        //3.获取下属考勤信息
        requestAbsents(1)
    } catch (err) {
        ElMessage.error(err)
    }
})
</script>


<template>
    <OADialog title="处理考勤" v-model="dialogFormVisible" @submit="onSubmitAbsent">
        <el-form :model="absentForm" :rules="rules" ref="absentFormRef" label-width="100px">
            <el-form-item label="结果" prop="status">
                <el-radio-group v-model="absentForm.status" class="ml-4">
                    <el-radio :value="2">通过</el-radio>
                    <el-radio :value="3">拒绝</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="理由" prop="response_content">
                <el-input :rows="4" type="textarea" v-model="absentForm.response_content" placeholder="请输入理由"
                    autocomplete="off" />
            </el-form-item>
        </el-form>
    </OADialog>
    <OAMain title="下属考勤">
        <el-card>
            <el-table :data="absents" style="width: 100%">
                <el-table-column label="发起人">
                    <template #default="scope">
                        {{ '['+ scope.row.requester.department.name +']'+ scope.row.requester.realname}}
                    </template>
                </el-table-column>
                <el-table-column prop="title" label="标题" />
                <el-table-column prop="absent_type.name" label="类型" />
                <el-table-column prop="request_content" label="原因" />
                <el-table-column label="发起时间">
                    <template #default="scope">
                        {{ timeFormatter.stringFromDateTime(scope.row.create_date) }}
                    </template>
                </el-table-column>
                <el-table-column label="开始日期">
                    <template #default="scope">
                        {{ timeFormatter.stringFromDate(scope.row.start_date) }}
                    </template>
                </el-table-column>
                <el-table-column prop="end_date" label="结束日期">
                    <template #default="scope">
                        {{ timeFormatter.stringFromDate(scope.row.end_date) }}
                    </template>
                </el-table-column>
                <!-- 这里为什么用prop="responser.realname"而不使用responser_str：
                如果使用responser_str，那么就会使用responser，responser来自responser_data,
                如果你是董事会leader，那么后端传来的是None，responser.email为空，responser_str返回无
                那么审批领导就会显示无而不是名字 -->
                <el-table-column label="审核领导" prop="responser.realname">
                    <!-- {{ responser_str }} -->
                </el-table-column>
                <el-table-column prop="response_content" label="反馈意见" />
                <el-table-column label="审核状态">
                    <template #default="scope">
                        <el-tag type="info" v-if="scope.row.status == 1">审核中</el-tag>
                        <el-tag type="success" v-else-if="scope.row.status == 2">已通过</el-tag>
                        <el-tag type="danger" v-else>已拒绝</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="处理">
                    <template #default="scope">
                        <el-button v-if="scope.row.status == 1" @click="onShowDialog(scope.$index)" type="primary" icon="EditPen" />
                        <el-button v-else disabled type="default">已处理</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <template #footer>
                <!-- <el-pagination background layout="prev, pager, next" :total="pagination.total" :page-size="10"
                    v-model:current-page="pagination.page" /> -->
                <OAPagination v-model="pagination.page" :total="pagination.total"></OAPagination>
            </template>
        </el-card>
    </OAMain>
</template>


<style scoped></style>